<html>
<head>
<title>DragWindow example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.Image');
	load('core.ui.DragWindow');

	function init() {
		
		// Create original image.
		var image = new core.ui.Image();
		image.setSource('images/compass.gif');
		
		// Create transparent drag source window with the same image.
		var dragSource = new core.ui.DragWindow();
		dragSource.setStyle('background', 'url(images/compass.gif) no-repeat center center');
		dragSource.setOpacity(50);
		
		// Listen for "end drag" notifications from the drag source.
		dragSource.addDragListener({
			onEndDrag : function(sender) {
				image.move(sender.getX(), sender.getY());
				sender.hide();
			}
		});
		
		image.onmousedown = function(event) {
			
			// Show the drag source when user clicks the image.
			dragSource.move(this.getX(), this.getY());
			dragSource.beginDrag(event);
			dragSource.show();
			
			// Stop event for further processing. This shoud prevent browser
			// to show "prohibited" icon when user tries to drag the image.
			event.stop();
			event.cancel();
		}
		
		image.center();
		image.show();
	}
	
</script>
<style type="text/css">

	.Image,
	.DragWindow
	{
		width: 163px;
		height: 154px;
		cursor: move;
	}

</style>
</head>

<body onload="init()" />
</html>
